<script>
export default {
  data() {
    return {
      displayValue: "0",
      previousValue: null,
      operator: null,
      waitingForOperand: false,
      memory: 0,
      clearAll: true,
      showScientific: false,
      showHistory: false,
      history: [],
    };
  },
  methods: {
    inputDigit(digit) {
      if (this.waitingForOperand) {
        this.displayValue = String(digit);
        this.waitingForOperand = false;
        this.clearAll = false;
      } else {
        this.displayValue =
          this.displayValue === "0" ? String(digit) : this.displayValue + digit;
        this.clearAll = false;
      }
    },

    inputDecimal() {
      if (this.waitingForOperand) {
        this.displayValue = "0.";
        this.waitingForOperand = false;
        return;
      }

      if (this.displayValue.indexOf(".") === -1) {
        this.displayValue += ".";
      }
    },

    toggleSign() {
      const value = parseFloat(this.displayValue);
      if (value !== 0) {
        this.displayValue = String(-value);
      }
    },

    inputPercent() {
      const value = parseFloat(this.displayValue);
      this.displayValue = String(value / 100);
    },

    handleOperator(nextOperator) {
      const inputValue = parseFloat(this.displayValue);

      if (this.operator && this.waitingForOperand) {
        this.operator = nextOperator;
        return;
      }

      if (this.previousValue === null) {
        this.previousValue = inputValue;
      } else if (this.operator) {
        const result = this.performCalculation();
        this.displayValue = String(result);
        this.previousValue = result;
      }

      this.waitingForOperand = true;
      this.operator = nextOperator;
    },

    performCalculation() {
      const previousValue = this.previousValue;
      const inputValue = parseFloat(this.displayValue);

      switch (this.operator) {
        case "+":
          return previousValue + inputValue;
        case "-":
          return previousValue - inputValue;
        case "×":
          return previousValue * inputValue;
        case "÷":
          return previousValue / inputValue;
        default:
          return inputValue;
      }
    },

    clearDisplay() {
      if (this.clearAll) {
        this.displayValue = "0";
        this.previousValue = null;
        this.operator = null;
        this.waitingForOperand = false;
        this.clearAll = true;
      } else {
        this.displayValue = "0";
        this.clearAll = true;
      }
    },

    handleEquals() {
      const inputValue = parseFloat(this.displayValue);

      if (this.previousValue !== null && this.operator) {
        const result = this.performCalculation();
        this.displayValue = String(result);
        this.previousValue = null;
        this.operator = null;
        this.waitingForOperand = true;
      }
    },

    formatDisplay(value) {
      // 处理显示格式
      const stringValue = String(value);
      if (stringValue.length > 9) {
        if (stringValue.includes(".")) {
          // 如果有小数点，尝试限制小数位数但保持总长度不超过9
          const parts = stringValue.split(".");
          const integerLength = parts[0].length;
          const maxDecimalPlaces = Math.max(0, 9 - integerLength - 1); // -1是小数点本身

          if (maxDecimalPlaces <= 0) {
            // 整数部分已经太长，转为科学计数法
            return parseFloat(value).toExponential(4);
          }

          // 保留指定小数位数
          return parseFloat(value).toFixed(maxDecimalPlaces);
        }

        // 纯整数且超长时，使用科学计数法
        return parseFloat(value).toExponential(4);
      }

      return stringValue;
    },

    toggleScientific() {
      this.showScientific = !this.showScientific;
    },

    square() {
      const value = parseFloat(this.displayValue);
      this.displayValue = String(value * value);
    },

    squareRoot() {
      const value = parseFloat(this.displayValue);
      this.displayValue = String(Math.sqrt(value));
    },

    power() {
      const value = parseFloat(this.displayValue);
      this.displayValue = String(Math.pow(value, 2));
    },

    sin() {
      const value = parseFloat(this.displayValue);
      this.displayValue = String(Math.sin(value));
    },

    cos() {
      const value = parseFloat(this.displayValue);
      this.displayValue = String(Math.cos(value));
    },

    tan() {
      const value = parseFloat(this.displayValue);
      this.displayValue = String(Math.tan(value));
    },

    log() {
      const value = parseFloat(this.displayValue);
      this.displayValue = String(Math.log(value));
    },

    ln() {
      const value = parseFloat(this.displayValue);
      this.displayValue = String(Math.log(value));
    },

    pi() {
      this.displayValue = String(Math.PI);
    },

    e() {
      this.displayValue = String(Math.E);
    },

    toggleHistory() {
      this.showHistory = !this.showHistory;
    },

    clearHistory() {
      this.history = [];
    },

    useHistoryItem(item) {
      this.displayValue = item.expression;
      this.previousValue = null;
      this.operator = null;
      this.waitingForOperand = false;
    },

    goBack() {
      uni.navigateBack({
        delta: 1
      });
    },
  },
  computed: {
    formattedDisplayValue() {
      return this.formatDisplay(this.displayValue);
    },
  },
};
</script>

<template>
  <view class="ios-calculator">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left">
        <view class="back-button" @click="goBack">
          <tui-icon name="arrowleft" size="24" color="#ffffff"></tui-icon>
        </view>
      </view>
      <view class="nav-title">计算器</view>
      <view class="nav-right">
        <view class="nav-button" @click="toggleHistory">
          <tui-icon name="clock" size="24" color="#ffffff"></tui-icon>
        </view>
      </view>
    </view>

    <!-- 显示屏 -->
    <view class="display-container">
      <view class="display">
        <text class="display-text">{{ formattedDisplayValue }}</text>
      </view>
    </view>

    <!-- 计算器按钮 -->
    <view class="buttons">
      <!-- 科学计算器切换按钮 -->
      <view class="button-row" v-if="!showScientific">
        <view class="button function-button" @click="toggleScientific">
          <text class="button-text">Sci</text>
        </view>
      </view>

      <!-- 科学计算器按钮 -->
      <template v-if="showScientific">
        <view class="button-row">
          <view class="button function-button" @click="toggleScientific">
            <text class="button-text">Basic</text>
          </view>
          <view class="button function-button" @click="square">
            <text class="button-text">x²</text>
          </view>
          <view class="button function-button" @click="squareRoot">
            <text class="button-text">√</text>
          </view>
          <view class="button function-button" @click="power">
            <text class="button-text">xʸ</text>
          </view>
        </view>
        <view class="button-row">
          <view class="button function-button" @click="sin">
            <text class="button-text">sin</text>
          </view>
          <view class="button function-button" @click="cos">
            <text class="button-text">cos</text>
          </view>
          <view class="button function-button" @click="tan">
            <text class="button-text">tan</text>
          </view>
          <view class="button function-button" @click="log">
            <text class="button-text">log</text>
          </view>
        </view>
        <view class="button-row">
          <view class="button function-button" @click="ln">
            <text class="button-text">ln</text>
          </view>
          <view class="button function-button" @click="pi">
            <text class="button-text">π</text>
          </view>
          <view class="button function-button" @click="e">
            <text class="button-text">e</text>
          </view>
          <view class="button operator-button" @click="handleOperator('÷')">
            <text class="button-text">÷</text>
          </view>
        </view>
      </template>

      <!-- 基本计算器按钮 -->
      <view class="button-row">
        <view class="button function-button" @click="clearDisplay">
          <text class="button-text">{{ clearAll ? "AC" : "C" }}</text>
        </view>
        <view class="button function-button" @click="toggleSign">
          <text class="button-text">+/-</text>
        </view>
        <view class="button function-button" @click="inputPercent">
          <text class="button-text">%</text>
        </view>
        <view class="button operator-button" @click="handleOperator('÷')">
          <text class="button-text">÷</text>
        </view>
      </view>

      <!-- 第一行 -->
      <view class="button-row">
        <view class="button number-button" @click="inputDigit(7)">
          <text class="button-text">7</text>
        </view>
        <view class="button number-button" @click="inputDigit(8)">
          <text class="button-text">8</text>
        </view>
        <view class="button number-button" @click="inputDigit(9)">
          <text class="button-text">9</text>
        </view>
        <view class="button operator-button" @click="handleOperator('×')">
          <text class="button-text">×</text>
        </view>
      </view>

      <!-- 第二行 -->
      <view class="button-row">
        <view class="button number-button" @click="inputDigit(4)">
          <text class="button-text">4</text>
        </view>
        <view class="button number-button" @click="inputDigit(5)">
          <text class="button-text">5</text>
        </view>
        <view class="button number-button" @click="inputDigit(6)">
          <text class="button-text">6</text>
        </view>
        <view class="button operator-button" @click="handleOperator('-')">
          <text class="button-text">-</text>
        </view>
      </view>

      <!-- 第三行 -->
      <view class="button-row">
        <view class="button number-button" @click="inputDigit(1)">
          <text class="button-text">1</text>
        </view>
        <view class="button number-button" @click="inputDigit(2)">
          <text class="button-text">2</text>
        </view>
        <view class="button number-button" @click="inputDigit(3)">
          <text class="button-text">3</text>
        </view>
        <view class="button operator-button" @click="handleOperator('+')">
          <text class="button-text">+</text>
        </view>
      </view>

      <!-- 第四行 -->
      <view class="button-row">
        <view class="button number-button zero-button" @click="inputDigit(0)">
          <text class="button-text">0</text>
        </view>
        <view class="button number-button" @click="inputDecimal">
          <text class="button-text">.</text>
        </view>
        <view class="button operator-button" @click="handleEquals">
          <text class="button-text">=</text>
        </view>
      </view>
    </view>

    <!-- 历史记录抽屉 -->
    <tui-drawer mode="right" :visible="showHistory" @close="showHistory = false">
      <view class="history-drawer">
        <view class="drawer-header">
          <text class="drawer-title">计算历史</text>
          <view class="drawer-actions">
            <view class="drawer-clear" @click="clearHistory">
              <tui-icon name="trash" size="20" color="#999999"></tui-icon>
            </view>
            <view class="drawer-close" @click="showHistory = false">
              <tui-icon name="close" size="20" color="#999999"></tui-icon>
            </view>
          </view>
        </view>
        
        <scroll-view scroll-y class="history-list" v-if="history.length > 0">
          <view 
            class="history-item" 
            v-for="item in history" 
            :key="item.id"
            @click="useHistoryItem(item)"
          >
            <text class="history-expression">{{ item.expression }}</text>
            <text class="history-result">= {{ item.result }}</text>
            <text class="history-time">{{ item.timestamp }}</text>
          </view>
        </scroll-view>
        
        <view class="empty-history" v-else>
          <text>暂无计算历史</text>
        </view>
      </view>
    </tui-drawer>
  </view>
</template>

<style scoped>
.ios-calculator {
  min-height: 100vh;
  background: linear-gradient(180deg, #000000 0%, #1a1a1a 100%);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
}

/* 导航栏样式 */
.nav-bar {
  height: 88rpx;
  padding-top: 44rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.95) 0%, rgba(28, 28, 28, 0.85) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.05);
}

.nav-left, .nav-right {
  width: 88rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-button, .nav-button {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32rpx;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.back-button:active, .nav-button:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.1);
}

.nav-title {
  color: #ffffff;
  font-size: 34rpx;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 显示屏 */
.display-container {
  position: relative;
  padding: 40rpx 32rpx;
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.5) 0%, rgba(28, 28, 28, 0) 100%);
}

.display {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 40rpx;
  min-height: 260rpx;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 32rpx;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.display-text {
  font-size: 96rpx;
  color: #ffffff;
  font-weight: 300;
  text-align: right;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 按钮区域 */
.buttons {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  gap: 16rpx;
  background: linear-gradient(180deg, rgba(28, 28, 28, 0) 0%, rgba(28, 28, 28, 0.5) 100%);
}

.button-row {
  display: flex;
  height: 160rpx;
  gap: 16rpx;
}

.button {
  flex: 1;
  border-radius: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
}

.button-text {
  font-size: 48rpx;
  line-height: 1;
  transition: all 0.3s ease;
}

.function-button {
  background: linear-gradient(135deg, #2c2c2c 0%, #3c3c3c 100%);
}

.function-button .button-text {
  color: #ffffff;
  font-weight: 500;
  font-size: 32rpx;
}

.number-button {
  background: linear-gradient(135deg, #333333 0%, #404040 100%);
}

.number-button .button-text {
  color: #ffffff;
  font-weight: 400;
}

.operator-button {
  background: linear-gradient(135deg, #ff9f0a 0%, #ffb23d 100%);
  border: none;
}

.operator-button .button-text {
  color: #ffffff;
  font-weight: 600;
}

.zero-button {
  flex: 2.1;
  position: relative;
}

.zero-button .button-text {
  position: absolute;
  left: 40rpx;
}

/* 按钮点击效果 */
.button:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 历史记录抽屉样式 */
.history-drawer {
  background: linear-gradient(135deg, #1c1c1c 0%, #2c2c2c 100%);
  height: 100vh;
  width: 600rpx;
  color: #ffffff;
}

.drawer-header {
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
}

.drawer-title {
  font-size: 34rpx;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #ffffff 0%, #cccccc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.drawer-actions {
  display: flex;
  gap: 24rpx;
}

.drawer-clear, .drawer-close {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32rpx;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.drawer-clear:active, .drawer-close:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.1);
}

.history-list {
  height: calc(100vh - 180rpx);
  padding: 16rpx;
}

.history-item {
  padding: 24rpx;
  margin-bottom: 16rpx;
  border-radius: 16rpx;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.history-item:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.05);
}

.history-expression {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8rpx;
}

.history-result {
  font-size: 36rpx;
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 8rpx;
  background: linear-gradient(135deg, #ffffff 0%, #cccccc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.history-time {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.4);
}

.empty-history {
  padding: 100rpx 32rpx;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 28rpx;
  font-weight: 500;
}

/* 科学计算器按钮样式 */
.function-button.scientific {
  background: linear-gradient(135deg, #2c2c2c 0%, #3c3c3c 100%);
}

.function-button.scientific .button-text {
  font-size: 24rpx;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* 适配暗黑模式 */
@media (prefers-color-scheme: dark) {
  .ios-calculator {
    background: linear-gradient(180deg, #000000 0%, #1a1a1a 100%);
  }
}
</style> 